<template>
  <div>
    <div class="title">
      <div class="title-t">
        <img
          class="img"
          src="../assets/客户中心/列表箭头.png"
          alt=""
          @click="left"
        />
        <img src="../assets/个人中心/fanhuishouye.png" width="25" alt="" />
      </div>
      <div class="title-b">
        <img src="../assets/客户中心/头像.png" width="80" height="80" alt="" />
        <div class="text">
          <p>名字：{{ Arr.custName }}</p>
          <p>电话：{{ Arr.telephone }}</p>
        </div>
        <div class="kehu" @click="gocustomerXQ">客户信息</div>
      </div>
    </div>
    <van-tabs v-model="active">
      <van-tab>
        <template #title> 收入分析 </template>
        <div class="textfenxi">
          <div class="textfenxi-t">
            <div class="textfenxi-t-t">
              <div class="l">
                <p>今年</p>
                <p>￥{{fenxi.year}}</p>
              </div>
              <div class="c"></div>
              <div class="r">
                <p>总收入</p>
                <p>￥{{fenxi.total}}</p>
              </div>
            </div>
            <div class="bili">同比 <span>{{fenxi.contrast}}</span></div>
          </div>
          <div class="textfenxi-b">
            <ul>
              <li><div><img src="../assets/客户中心/收入统计.png" width="19" alt=""> 收入统计</div></li>
              <li v-for="(item,index) in fenxi.list" :key="index">
                <p>{{item.year}}</p>
                <p>{{item.income}}</p>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab>
        <template #title> 旗下企业 </template>
        <div class="textQXia">
          <ul>
            <li v-for="(item, index) in qixiqye" :key="index">
              <div class="li-div">
                <img
                  src="../assets/客户中心/旗下企业-头像.png"
                  width="50px"
                  alt=""
                />
                <div>
                  <p>企业名称：{{ item.company }}</p>
                  <p>注册时间：{{ item.createTime }}</p>
                  <p>法人：{{ item.creator }}</p>
                </div>
              </div>
              <img src="../assets/客户中心/列表箭头.png" width="7px" alt="" />
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab>
        <template #title>合作伙伴 </template>
        <div class="textQXia">
          <ul>
            <li v-for="(item, index) in hezuohuo" :key="index">
              <div class="li-div">
                <img
                  src="../assets/客户中心/个人中心.png"
                  width="50px"
                  alt=""
                />
                <div>
                  <p>{{ item.creator }}</p>
                  <p>{{ item.company }}</p>
                  <p>成立时间：{{ item.createTime }}</p>
                </div>
              </div>
              <img src="../assets/客户中心/列表箭头.png" width="7px" alt="" />
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab>
        <template #title> 当年收入 </template>
        <div class="textshouru" v-for="(item, index) in money" :key="index">
          <p>{{ item.month }}月</p>
          <p>{{ item.income }}</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { CustShitu } from "../request/api";
export default {
  data() {
    return {
      active: 1,
      id: "",
      Arr: [],
      //旗下企业
      qixiqye: [],
      //合作伙伴
      hezuohuo: [],
      //当年收入
      money: [],
      //收入分析
      fenxi:[]
    };
  },
  methods: {
    left() {
      this.$router.push("/custlist");
    },
    gocustomerXQ() {
      this.$router.push({
        path: "/customerXQ",
        query: {
          id: this.id,
        },
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    CustShitu({
      id: this.id,
    }).then((res) => {
      console.log(res.data.datas[0].data);
      this.Arr = res.data;
      this.qixiqye = res.data.datas[3].data;
      this.hezuohuo = res.data.datas[2].data;
      this.money = res.data.datas[1].data;
      this.fenxi = res.data.datas[0].data;

    });
  },
};
</script>
 
<style lang = "less" scoped>
.title {
  background-color: #003399;
  box-sizing: border-box;
  width: 100%;
  height: 180px;

  .title-t {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    .img {
      transform: rotate(180deg);
    }
  }
  .title-b {
    background-color: #fff;
    height: 125px;
    width: 85%;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px 10px 0px 0;
    display: flex;
    align-items: center;
    position: relative;
    .text {
      p:nth-of-type(1) {
        font-weight: bold;
      }
      p:nth-of-type(2) {
        color: #ccc;
        margin-top: 5px;
      }
    }
    .kehu {
      position: absolute;
      right: 0;
      top: 20px;
      width: 80px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      height: 20px;
      background-color: #fc3;
      border-radius: 20px 0 0px 20px;
    }
    img {
      margin: 0 10px;
    }
  }
}
/deep/ .van-tabs__line {
  width: 60px;
  background-color: #ffcc33;
}
/deep/ .van-tab--active {
  color: #003399;
}
.textQXia {
  background-color: #fff;
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  ul {
    li {
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      padding: 10px;
      box-sizing: border-box;
      .li-div {
        display: flex;
        align-items: center;
        p {
          color: #999;
          margin: 5px 10px;
          font-size: 14px;
        }
        p:nth-of-type(1) {
          color: #333;
          font-size: 16px;
        }
      }
    }
  }
}
.textshouru {
  background-color: #fff;
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  box-sizing: border-box;
  p {
    color: #999;
  }
  p:nth-of-type(2) {
    color: #003399;
  }
}
.textfenxi {
  width: 99%;
  padding: 20px;
  box-sizing: border-box;
  .textfenxi-t {
    background-color: #fff;
    width: 99%;
    height: 100px;
    padding: 10px;
    border-radius: 0 0 30px 20px;
    .textfenxi-t-t {
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #ccc;
      .l {
        padding: 10px;
        p:nth-of-type(2) {
          color: #fc3;
          font-size: 22px;
        }
      }
      .c {
        width: 1px;
        height: 50px;
        background-color: #ccc;
      }
      .r {
        padding: 10px;
        p:nth-of-type(2) {
          color: #fc3;
          font-size: 22px;
        }
      }
    }
    .bili{
      width: 120px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      margin-left: 20px;
      background-color: #f4f6f7;
      color: #666;
      span{
        color: #003399;
      }
    }
  }
  .textfenxi-b {
    background-color: #fff;
    width: 99%;
    padding: 10px;
    border-radius: 20px 20px 0 0;
    ul{
      li{
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #efefef;
        color: #ccc;
        p:nth-of-type(2){
          color: #fc3;
        }
      }
      li:nth-of-type(1){
        color: #7f8491;
      }
    }
  }
}
</style>